<template>
  <!-- 管理员 ==> 业务管理（维修详情查看、垃圾分类审核） -->
  <view>
    <!--选项卡： 维修详情查看，垃圾分类审核 -->
    <view>
      <u-subsection :list="xuanXiangList" mode="subsection" :current="subCurrent" @change="xuanXiangChange">
      </u-subsection>
    </view>
    <!-- 报修列表Box -->
    <view v-if="subCurrent===0">
      <!-- 报修列表 -->
      <view style="margin-left: 40rpx;
                   margin-right: 40rpx;
                   ">
        <my-admin-repair-item :repair="item" v-for="(item,index) in repairList"  :key="index"></my-admin-repair-item>
      </view>
      <view style="margin-bottom: 150rpx;"></view>
    </view>
    <!-- 垃圾分类打卡积分列表 -->
    <view v-else class="refuse-class-list" style="margin: 30rpx;background-color: #f9f9f9;">
      <my-admin-refuseclassification-item :refuseclass="item" v-for="(item,index) in refuseclassList" :key="index">
      </my-admin-refuseclassification-item>
    </view>
    <view style="margin-bottom: 150rpx;"></view>
    <!-- 自定义tabBar -->
    <view>
      <u-tabbar :value="tabBarIndex" :fixed="true" @change="tabBarchange" :placeholder="false" activeColor="#1296db"
        :safeAreaInsetBottom="false">
        <block v-for="(item,index) in tabBarList" :key="index">
          <u-tabbar-item :text="item.text">
            <image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
            <image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
          </u-tabbar-item>
        </block>
      </u-tabbar>
    </view>
  </view>
</template>

<script>
  // 按需导入 mapState ,mapMutations,mapGetters 辅助函数
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        subCurrent: 0, //0： 维修详情查看，1: 垃圾分类审核
        xuanXiangList: ['维修详情查看', '垃圾分类审核'],
        repairList: [],
        refuseclassList: [],
        // 是否正在请求数据    节流阀（防止短时间内重复请求）
        isloading: false,
      };
    },
    computed: {
      // 将 m_user 模块中的 userType 数据映射到当前页面中使用
      ...mapState('m_user', ['userType', 'tabBarList1', 'tabBarList2', 'tabBarList3']),
      ...mapState('m_tabbar', ['tabBarList', 'tabBarIndex']),
    },
    onLoad(){
      // 获取报修单数据
      this.getRepairList();
      // 获取垃圾分类打卡数据
      this.getRefuseClassList();
    },
    methods: {
      // 选择 0：维修详情查看 or  1：垃圾分类审核
      xuanXiangChange(index) {
        this.subCurrent = index;
      },
      // 获取报修单数据 的方法
      async getRepairList(cb) {
         // ** 打开节流阀
         this.isloading = true
         const {data : res}= await uni.$http.get('/repair/getallrepairlist')
         // ** 关闭节流阀
         this.isloading = false
         // 只要数据请求完毕，就立即按需调用 cb 回调函数,cb() 是关闭下拉刷新的
         cb && cb()
         console.log(res)
         // 请求失败  弹框提醒
         if (res.status !== 200) return uni.$showMsg()
         // 请求成功  为noticeList  赋值
         this.repairList=res.data
      },
      // 获取垃圾分类打卡数据 的方法
      async getRefuseClassList(cb) {
         // ** 打开节流阀
         this.isloading = true
         const {data : res}= await uni.$http.get('/refuseclassification/getnewrefuseclassificationlist')
         // ** 关闭节流阀
         this.isloading = false
         // 只要数据请求完毕，就立即按需调用 cb 回调函数,cb() 是关闭下拉刷新的
         cb && cb()
         console.log(res)
         // 请求失败  弹框提醒
         if (res.status !== 200) return uni.$showMsg()
         // 请求成功  为noticeList  赋值
         // 图片url处理
         var tempDataList=res.data;
         for(var i=0;i<tempDataList.length;i++){//循环遍历tempRefuseclassList，对每个tempRefuseclass进行操作
           if(tempDataList[i].img!=null){
             var imgArr=tempDataList[i].img.split(";");//将数据库中的url字符串用；分割为数组
             tempDataList[i].img=[];//重新初始化为数组
             for(var j=0;j<imgArr.length-1;j++){//j<imgArr.length-1  是为了除去最后一个空元素
               tempDataList[i].img[j]=imgArr[j];
             }
           }
         }
         this.refuseclassList=tempDataList
      },
      // 下拉刷新的事件
      onPullDownRefresh() {
        // 1. 重置关键数据
        this.isloading = false
        this.repairList = [];
        this.refuseclassList = [];
        // 2. 重新发起请求   传参（关闭下拉刷新，因为默认不关闭）
        this.getRepairList(() => uni.stopPullDownRefresh())
        this.getRefuseClassList(() => uni.stopPullDownRefresh())
      },





      ...mapMutations('m_tabbar', ['updateTabBarList', 'updateTabBarIndex']),
      tabBarchange(name) {
        // uni.switchTab({
        //   url: this.tabBarList[name].pagePath
        // })
        uni.redirectTo({
          url: this.tabBarList[name].pagePath
        })
        this.setTabBarIndex(name);
      },
      setTabBarList(list) {
        this.updateTabBarList(list);
      },
      setTabBarIndex(index) {
        this.updateTabBarIndex(index);
      }
    }
  }
</script>

<style lang="scss">
  .u-page {
    padding: 0;

    &__item {

      &__title {
        color: $u-tips-color;
        background-color: $u-bg-color;
        padding: 30rpx;
        font-size: 30rpx;

        &__slot-title {
          color: $u-primary;
          font-size: 30rpx;
        }
      }

      &__slot-icon {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }
</style>
